<!-- 首页 -->
<template>
    <view  class="index-content-box">
        <!-- 搜索框 -->
        <view class="search-history" @click="jump('/pages/public/search')">
            <u-search :disabled="false" margin="30rpx" placeholder="搜索商品" height="64" @focus="jump('/pages/public/search')" @custom="jump('/pages/public/search')" ></u-search>
        </view>
        <!-- 轮播图 -->
        <view class="banner">
            <u-swiper :list="bannerData" :height="400" :border-radius="0" @click="clickBanner"></u-swiper>
        </view>

        <!--活动专区-->
        <view class="activity-zone">
            <view class="activity-1">
                <view class="activity-1-item">
                    <image src="/static/images/index_img/c1.jpg" />
                </view>
                <view class="activity-1-item">
                    <image src="/static/images/index_img/c2.jpg" />
                </view>
                <view class="activity-1-item">
                    <image src="/static/images/index_img/c3.jpg" @click="jump('/pages/app/score/list')" />
                </view>
            </view>
            <view class="activity-2">
                <!-- <view class="activity-2-left">
                    <image src="/static/images/index_img/a1.gif" @click="jump('/pages/index/view?id=10')" />
                </view> -->
                <view class="activity-2-right">
                    <view class="activity-2-right-item">
                        <image src="/static/images/index_img/a1.png" @click="jump('/pages/index/view?id=13')" />
                    </view>
                    <view class="activity-2-right-item">
                        <image src="/static/images/index_img/a2.png" @click="jump('/pages/index/view?id=11')" />
                    </view>
                    <view class="activity-2-right-item">
                        <image src="/static/images/index_img/a3.png" @click="jump('/pages/index/view?id=12')" />
                    </view>
                </view>
            </view>
        </view>

        <!-- 商品列表 -->
        <view class="goods-list">
<!--            <view class="goods-cat"><image src="/static/images/index_img/t1.png" /></view>-->

            <block v-for="(item, index) in homeTemplate" :key="item.id">

                <!-- 功能标题 -->
                <sh-title-card v-if="item.type === 'title-block'" :title="item.content.name" :bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>

                <!-- 商品 -->
                <sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
            </block>
        </view>

<!--        <view class="goods-list">
            <block >
                <sh-goods-card :image="'http://file.shopro.top/uploads/20210519/e3e96da45a068da5c3ecea808b573a9b.jpg'" :title="'安踏外套男装官网正品2020春夏季新款连帽健身休闲夹克卫衣运动服'" :subtitle="'正品保障 放心购买'" :price="285" :originPrice="365" :sales="0" :tagTextList="['会员专享']" @click="" />
                <sh-goods-card :image="'http://file.shopro.top/uploads/20210519/e3e96da45a068da5c3ecea808b573a9b.jpg'" :title="'安踏外套男装官网正品2020春夏季新款连帽健身休闲夹克卫衣运动服'" :subtitle="'正品保障 放心购买'" :price="285" :originPrice="365" :sales="0" :tagTextList="['会员专享']" @click="" />
                <sh-goods-card :image="'http://file.shopro.top/uploads/20210519/e3e96da45a068da5c3ecea808b573a9b.jpg'" :title="'安踏外套男装官网正品2020春夏季新款连帽健身休闲夹克卫衣运动服'" :subtitle="'正品保障 放心购买'" :price="285" :originPrice="365" :sales="0" :tagTextList="['会员专享']" @click="" />
                <sh-goods-card :image="'http://file.shopro.top/uploads/20210519/e3e96da45a068da5c3ecea808b573a9b.jpg'" :title="'安踏外套男装官网正品2020春夏季新款连帽健身休闲夹克卫衣运动服'" :subtitle="'正品保障 放心购买'" :price="285" :originPrice="365" :sales="0" :tagTextList="['会员专享']" @click="" />
                <sh-goods-card :image="'http://file.shopro.top/uploads/20210519/e3e96da45a068da5c3ecea808b573a9b.jpg'" :title="'安踏外套男装官网正品2020春夏季新款连帽健身休闲夹克卫衣运动服'" :subtitle="'正品保障 放心购买'" :price="285" :originPrice="365" :sales="0" :tagTextList="['会员专享']" @click="" />
                <sh-goods-card :image="'http://file.shopro.top/uploads/20210519/e3e96da45a068da5c3ecea808b573a9b.jpg'" :title="'安踏外套男装官网正品2020春夏季新款连帽健身休闲夹克卫衣运动服'" :subtitle="'正品保障 放心购买'" :price="285" :originPrice="365" :sales="0" :tagTextList="['会员专享']" @click="" />
                <sh-goods-card :image="'http://file.shopro.top/uploads/20210519/e3e96da45a068da5c3ecea808b573a9b.jpg'" :title="'安踏外套男装官网正品2020春夏季新款连帽健身休闲夹克卫衣运动服'" :subtitle="'正品保障 放心购买'" :price="285" :originPrice="365" :sales="0" :tagTextList="['会员专享']" @click="" />
            </block>
        </view>-->


        <!-- 登录提示 -->
        <shopro-auth-modal :spm="spm"></shopro-auth-modal>

        <!-- 关注微信公众号 -->
        <wx-official-account />


    </view>
</template>

<script>

import wxOfficialAccount from './components/wx-official-account';
import shGoodsCard from './components/sh-goods-card.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
import shHotGoods from './components/sh-hot-goods.vue';
import shTitleCard from './components/sh-title-card.vue';


export default {
    components: {wxOfficialAccount,shGoodsCard,shHotGoods,shTitleCard},
    data() {
        return {
            spm: '',
            bannerData: [
                { image: 'https://zmssp.oss-cn-hangzhou.aliyuncs.com/image/55bc60170566cea4dbf81d16edb05721.jpg', url:'/pages/index/user' },
                { image: 'https://zmssp.oss-cn-hangzhou.aliyuncs.com/newimage/a33d2fb95e32d06bde35ba36d6290c03.jpg', url:'/pages/index/cart'},
                { image: 'https://cdn.uviewui.com/uview/swiper/2.jpg', url:'/pages/index/category'}
            ],
        }
    },
    onLoad(opt){
        if(opt.spm){
            let spm = opt.spm.split('.');
            if(spm[0]){
                this.spm = spm[0];
            }
            this.$Router.push('/pages/user/info');
        }
    },
    computed: {
        ...mapState({
            homeTemplate: ({ shopro }) => shopro.template?.home
        }),
    },
    methods:{
        // 链接跳转
        jump(url){
            uni.navigateTo({url})
        },
        // 点击轮播图
        clickBanner(e){
            // this.jump(this.bannerData[e].url)
        }
    }
}
</script>

<style lang="scss">
    .index-content-box{
        width: 750rpx; height: auto;
        padding-bottom: 220rpx;
        .search-history{
            width: 750rpx; height: 120rpx;
            border: 1rpx solid white;
            background-color: #ffffff;
            position: fixed;
            top: 0; left: 0;
            z-index: 100;
        }
        .banner{
            margin-top: 120rpx;
        }
        .goods-list{
            width: 750rpx;
        }
        .activity-zone{
            width: 750rpx; min-height: 350rpx;
            margin-bottom: 20rpx;
            background-color: #ffffff;
            .activity-1{
                width: 750rpx; height: 350rpx;
                display: flex;
                justify-content:space-between;
                .activity-1-item{
                    width: 240rpx; height: 350rpx;
                    image{
                        width: 240rpx; height: 350rpx;
                    }
                }
            }
            .activity-2{
                width: 750rpx; height: 380rpx;
                display: flex;
                .activity-2-left,.activity-2-right{
                    width: 345rpx; height: 320rpx;
                    margin-top: 20rpx;
                }
                .activity-2-left{
                    width: 400rpx;
                    image{
                        width: 380rpx; height: 340rpx;
                    }
                }
                .activity-2-right {
                    width: 380rpx;
                    .activity-2-right-item{
                        display: block;
                        width: 315rpx; height: 100rpx;
                        margin-top: 10rpx;
                        image{
                            margin-left: 20rpx;
                            width: 315rpx; height: 100rpx;
                        }
                    }
                }

            }

        }

    }
    .explain{
        height: 200rpx;
        width: 750rpx;
        padding-top: 20rpx;
        text-align: center;
        font-size: 30rpx;
        line-height: 40rpx;
    }
</style>
